<template>
  <div class="person">
    <img :src="avatar" alt="" />
    <div>{{ name }}</div>
    <i class="el-icon-circle-close" @click="clickx"></i>
  </div>
</template>

<script>
export default {
  // 如下声明的两个属性:       avatar:头像路径    name:名称
  // 默认undefined，可以接收任意类型的数据
  props: ['avatar', 'name'],
  methods: {
    clickx() {
      //点击叉子后执行
      //将该点击事件作为当前组建的自定义事件抛出给父组件
      //父组件捕获后,可以进行后续业务处理
      this.$emit('delete')
    },
  },
}
</script>

<style lang="scss" scoped>
.person {
  margin: 0px 10px 10px 0px;
  display: inline-block;
  border: 1px solid #ddd;
  width: 90px;
  padding: 5px;
  position: relative;
  img {
    width: 90px;
  }
  div {
    font-size: 0.8em;
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  i {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #fff;
    display: none;
  }
}
.person:hover i {
  display: block;
}
</style>
